// 定义 BookCategoryManager 组件
const roleApi='/api/role'

const RoleManager = {
    name: 'RoleManager',
    components: {
        RoleForm: RoleForm, // 局部注册 RoleForm 组件
        RoleTable: RoleTable, // 局部注册 RoleTable 组件
        RoleQueryForm: RoleQueryForm
    },
    template: `
  <el-main>
    <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>角色管理</el-breadcrumb-item>
    </el-breadcrumb>

    

    <div class="button-area">
    <el-button type="primary" @click="openForm(null)">
        <i class="fa-solid fa-plus"></i> 新增
    </el-button>
    <el-button type="danger">
        <i class="fa-solid fa-trash"></i> 删除
    </el-button>
    <el-button type="success">
        <i class="fa-solid fa-upload"></i> 上架
    </el-button>
    </div>

     
</el-main>
    `,
    setup() {
        // 使用 Vue 的 ref 函数创建响应式数据
        const roles = Vue.ref([])
        const showForm = Vue.ref(false)
        const currentRole = Vue.ref(null)
        const queryParams = Vue.reactive({})

        // 组合式函数 - 数据获取
        const fetchData = () => {
           
        }

        // 提交表单时的处理函数
        const handleSubmit = (formData) => {
            
        }

        // 打开表单时的处理函数
        const openForm = (role) => {
           
        }

        // 删除角色的处理函数
        const handleDelete = (id) => {

           
        }

        const handleSearch = (params) => {
           
        }

        // 在组件挂载时获取数据
        onMounted(() => {
            
            }
        )
        // 返回创建的函数和数据，供模板使用

        return { roles, showForm, queryParams, currentRole ,handleSearch,openForm,handleDelete,handleSubmit};
    }
};
